<template>
	<!--这是个自定义的tooltip组件，用于控制显示n行，超出n行后显示省略号并显示tooltip，主要是表格中使用-->
	<div :style="{'width':width}">
		<div class="kt-tooltip-input__hidden" style="position: fixed; left: -19800px;"><span>{{ label }}</span>{{ value }}</div>
		<p v-if="flag"
		     @mouseenter="visibilityChange($event)"
		     style="overflow:hidden;text-overflow:ellipsis"
		     :style="{'-webkit-line-clamp':rows,'color':color,cursor:cursor ? 'pointer' : ''}">
			<span style="color: #999;cursor: pointer;">{{ label }}</span>{{ value }}
		</p>
		<el-tooltip :placement="placement" v-else>
			<div slot="content">
				<div>{{ value }}</div>
				<p v-if="clip" style="text-align: right;"><a href="javascript:void 0" :data-clipboard-text="value" @mouseenter="handlerClipShow($event)">一键复制</a></p>
			</div>
			<p style="overflow:hidden;text-overflow:ellipsis" :style="{'-webkit-line-clamp':rows, cursor:cursor ? 'pointer' : ''}">
				<span style="color: #999;cursor: pointer;">{{ label }}</span>{{ value }}
			</p>
		</el-tooltip>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				flag: true
			}
		},
		methods: {
			visibilityChange(event) {
				let ev = event.target;
				let thisWidth = ev.offsetWidth; // 元素的宽度
				let wordWidth = $(ev).prev('.kt-tooltip-input__hidden')[0].scrollWidth; // 文本内容的宽度
				if (wordWidth / thisWidth > this.rows) {
					this.flag = false;
				}
			},
			/*handlerClipShow(event) {
				const clipboard = new Clipboard(event.target);
				clipboard.on('success', (e) => {
					this.$message({
						message: '复制成功',
						type: 'success'
					});
					e.clearSelection();
				});
			}*/
		},
		props: {
			label: {
				type: String,
				required: false
			},
			value: {
				type: String,
				required: true
			},
			width: {
				type: String,
				default: '100%'
			},
			rows: {
				type: Number,
				default: 1
			},
			color: {
				type: String,
				required: false
			},
			placement: {
				type: String,
				default: 'top'
			},
			clip: {
				type: Boolean,
				default: false
			},
			cursor: {
				type: Boolean,
				default: true
			}
		}
	}
</script>
